import { Button, Col, Row } from "antd";
import { Card, DatePicker, InputItem, List, TextareaItem, Toast } from "antd-mobile";
import { addon } from "pao-aop";
import { BaseReactElement, BaseReactElementControl, BaseReactElementState, reactControl } from "pao-aop-client";
import React from "react";
import { FileUploadBtn } from "src/business/components/buss-components/file-operation-btn/file-upload-btn";
import { request } from "src/business/util_tool";
import { AppServiceUtility } from "src/projects/app/appService";
import { remote } from "src/projects/remote";
import './index.less';

// let moment = require('moment');
/**
 * 组件：服务详情状态
 */
export interface ServicerServiceDetailsViewState extends BaseReactElementState {
    /** 请求的数据 */
    data_info?: any;
    // 开始的图片
    begin_photo?: any;
    end_photo?: any;
    // 步骤状态标识
    stepStatus?: any;
    // 开始时间
    start_date?: any;
    // 结束时间
    end_date?: any;
    // 
    start_date_str?: any;
    end_date_str?: any;
    // 执行情况说明
    remarks?: string;
    // 服务前位置
    start_position?: string;
    // 服务后位置
    end_position?: string;

}
/**
 * 组件：服务详情
 * 服务详情
 */
export class ServicerServiceDetailsView extends BaseReactElement<ServicerServiceDetailsViewControl, ServicerServiceDetailsViewState> {
    constructor(props: any) {
        super(props);
        this.state = {
            data_info: [],
            begin_photo: [],
            end_photo: [],
            stepStatus: 0,
            start_date: '',
            end_date: '',
            start_date_str: '',
            end_date_str: '',
            remarks: '',
            start_position: '',
            end_position: '',
        };
    }
    componentDidMount() {
        let id = this.props.match!.params.key;
        request(this, AppServiceUtility.service_record_service.get_service_record_list_all!({ user_filter: true, id: id }, 1, 1))
            .then((datas: any) => {
                let data_info = datas.result && datas.result[0] ? datas.result[0] : [];
                let stepStatus = 0;
                if (data_info.hasOwnProperty('task_state')) {
                    if (data_info['task_state'] && data_info['task_state'] === '待接收') {
                        // 待接收的时候，开始必填，完成选填
                        stepStatus = 1;
                    } else if (data_info['task_state'] && data_info['task_state'] === '进行中') {
                        // 进行中的时候，必须填完成
                        stepStatus = 2;
                    }
                }
                this.setState({
                    stepStatus,
                    data_info,
                    begin_photo: data_info['task_begin_photo'] ? data_info['task_begin_photo'] : [],
                    end_photo: data_info['task_end_photo'] ? data_info['task_end_photo'] : [],
                });
            })
            .catch((error) => {
                console.info(error);
            });
    }

    startUpImg = (e: any) => {
        this.setState({
            begin_photo: e
        });
    }

    endUpImg = (e: any) => {
        this.setState({
            end_photo: e
        });
    }
    // 提交照片
    sumUP = () => {
        let { data_info, stepStatus, begin_photo, end_photo } = this.state;
        if (stepStatus === 1 && begin_photo.length === 0) {
            Toast.fail('请上传服务开始图片');
            return;
        }
        if (stepStatus === 2 && end_photo.length === 0) {
            Toast.fail('请上传服务结束图片');
            return;
        }
        if (!data_info['task_id']) {
            Toast.fail('非法操作！');
            return;
        }
        let param: any = {
            // 这里发过去要任务的ID
            id: data_info['task_id'] && data_info['task_id'] ? data_info['task_id'] : '',
            order_id: data_info['order_id'],
            begin_photo: begin_photo.length > 0 ? begin_photo : '',
            end_photo: end_photo.length > 0 ? end_photo : '',
            start_date: this.state.start_date,
            end_date: this.state.end_date,
            remarks: this.state.remarks,
            start_position: this.state.start_position,
            end_position: this.state.end_position,

        };
        request(this, AppServiceUtility.task_service.change_task_service_order!(param))
            .then((datas: any) => {
                if (datas === 'Success') {
                    Toast.success('保存成功');
                    history.back();
                } else {
                    console.log(datas);
                }
            })
            .catch((error: any) => {
                console.log(error);
            });
    }
    selectStartDate = (e: any) => {
        console.log(e);
        this.setState({
            start_date_str: this.dateFormat(e),
            start_date: e,
        });
    }
    selectEndDate = (e: any) => {
        console.log(e);
        this.setState({
            end_date_str: this.dateFormat(e),
            end_date: e,
        });
    }
    dateFormat(d: any) {
        var date = (d.getFullYear()) + "-" +
            (d.getMonth() + 1) + "-" +
            (d.getDate()) + " " +
            (d.getHours()) + ":" +
            (d.getMinutes()) + ":" +
            (d.getSeconds());
        return date;
    }
    remarks = (e: any) => {
        this.setState({
            remarks: e,
        });
    }
    startPosition = (e: any) => {
        this.setState({
            start_position: e,
        });
    }
    endPosition = (e: any) => {
        this.setState({
            end_position: e,
        });
    }
    render() {
        let { stepStatus, data_info, begin_photo, end_photo } = this.state;
        console.log(stepStatus);
        return (
            <Row>
                <Card className='list-conten' style={{ padding: '10px 10px', margin: '10px 0', }}>
                    <Row type='flex' justify='center'>
                        <Col className='list-col' span={10}><img src={data_info.service_product_img && data_info.service_product_img[0]} style={{ height: '72pt', width: '110pt' }} /></Col>
                        <Col span={14} className='list-col'>
                            <Row><strong>{data_info.task_name}</strong></Row>
                            <Row>
                                {data_info.purchaser_name}<span style={{ float: 'right', }}>{data_info.task_state}</span>
                            </Row>
                            <Row>{data_info.create_date}</Row>
                            {/* <Row><Col span={8}>{data_info.service_provider_name}</Col></Row> */}
                            <Row>{data_info.service_provider_name}</Row>
                            {/* <Row>
                                {data_info.task_address}
                            </Row> */}
                        </Col>
                    </Row>
                </Card>
                <Card>
                    <Card.Header
                        title="任务信息"
                    />
                    <Card.Body>
                        <Row>
                            任务地址：{data_info.task_address ? data_info.task_address : ''}
                        </Row>
                        <Row>
                            备注：{data_info.task_remark ? data_info.task_remark : ''}
                        </Row>
                    </Card.Body>
                </Card>
                <Card>
                    <Card.Header
                        title="长者信息"
                    />
                    <Card.Body>
                        <Row>
                            长者姓名：{data_info.purchaser_name ? data_info.purchaser_name : ''}
                        </Row>
                        <Row>
                            联系方式：{data_info.purchaser_telephone ? data_info.purchaser_telephone : ''}
                        </Row>
                        <Row>
                            长者类型：{data_info.classification_name ? data_info.classification_name : ''}
                        </Row>
                    </Card.Body>
                </Card>
                <List className="my-list">

                    {this.state.data_info.start_date ?
                        <Row>
                            服务开始时间：{this.state.data_info.start_date}
                        </Row> : <DatePicker
                            mode="datetime"
                            title="选择服务开始时间"
                            onChange={this.selectStartDate}
                        >
                            <List.Item>{this.state.start_date_str ? this.state.start_date_str : '选择服务开始时间'}</List.Item>
                        </DatePicker>}
                    {this.state.data_info.end_date ?
                        <Row>
                            服务结束时间：{this.state.data_info.end_date}
                        </Row> : <DatePicker
                            mode="datetime"
                            title="选择服务结束时间"
                            onChange={this.selectEndDate}
                        >
                            <List.Item>{this.state.end_date_str ? this.state.end_date_str : '选择服务结束时间'}</List.Item>
                        </DatePicker>}
                    <InputItem
                        defaultValue={''}
                        moneyKeyboardAlign="left"
                        onChange={this.startPosition}
                    >
                        服务前位置：
                    </InputItem>
                    <InputItem
                        defaultValue={''}
                        moneyKeyboardAlign="left"
                        onChange={this.endPosition}
                    >
                        服务后位置：
                    </InputItem>
                </List>
                <Row style={{ paddingLeft: '20px' }}>
                    <Col span={12}>
                        <span style={{ marginBottom: '10px' }}>服务开始照片</span>
                        <FileUploadBtn value={begin_photo} list_type={"picture-card"} contents={"plus"} action={remote.upload_url} onChange={this.startUpImg} disabled={stepStatus === 2 || stepStatus === 0 ? true : false} />
                    </Col>
                    <Col span={12}>
                        <span style={{ marginBottom: '10px' }}>服务结束照片</span>
                        <FileUploadBtn value={end_photo} list_type={"picture-card"} contents={"plus"} action={remote.upload_url} onChange={this.endUpImg} disabled={stepStatus === 0 ? true : false} />
                    </Col>
                </Row>
                {/* <Card>
                    <Card.Header
                        title="服务开始"
                        extra={begin_photo.length > 0 ? <span>已上传</span> : <span>请拍照并上传</span>}
                    />
                    <Card.Body>
                        {this.state.data_info.start_date ?
                            <Row>
                                服务开始时间：{this.state.data_info.start_date}
                            </Row> : <DatePicker
                                mode="datetime"
                                title="选择服务开始时间"
                                onChange={this.selectStartDate}
                            >
                                <List.Item>{this.state.start_date_str ? this.state.start_date_str : '选择服务开始时间'}</List.Item>
                            </DatePicker>}
                        <br />
                        <FileUploadBtn value={begin_photo} list_type={"picture-card"} contents={"plus"} action={remote.upload_url} onChange={this.startUpImg} disabled={stepStatus === 2 || stepStatus === 0 ? true : false} />
                    </Card.Body>
                </Card> */}
                {/* <Card>
                    <Card.Header
                        title="服务结束"
                        extra={end_photo.length > 0 ? <span>已上传</span> : <span>请拍照并上传</span>}
                    />
                    <Card.Body>
                        {this.state.data_info.end_date ?
                            <Row>
                                服务结束时间：{this.state.data_info.end_date}
                            </Row> : <DatePicker
                                mode="datetime"
                                title="选择服务结束时间"
                                onChange={this.selectEndDate}
                            >
                                <List.Item>{this.state.end_date_str ? this.state.end_date_str : '选择服务结束时间'}</List.Item>
                            </DatePicker>}
                        <br />
                        <FileUploadBtn value={end_photo} list_type={"picture-card"} contents={"plus"} action={remote.upload_url} onChange={this.endUpImg} disabled={stepStatus === 0 ? true : false} />
                    </Card.Body>
                </Card> */}
                <List renderHeader={() => '执行情况'}>
                    <TextareaItem onChange={this.remarks} placeholder="请输入内容" rows={3} autoHeight={true} />
                </List>
                <div style={{ position: 'fixed', bottom: '0', width: '100%', height: '50px' }}>
                    <Button style={{ width: '100%' }} disabled={stepStatus === 0 ? true : false} type='primary' onClick={this.sumUP}>{stepStatus === 0 ? '已提交' : '提交'}</Button>
                </div>
            </Row>
        );
    }
}

/**
 * 控件：服务详情控制器
 * 服务详情
 */
@addon('ServicerServiceDetailsView', '服务详情', '服务详情')
@reactControl(ServicerServiceDetailsView, true)
export class ServicerServiceDetailsViewControl extends BaseReactElementControl {
    constructor() {
        super();
    }
}